// 当表单提交的时候
$('#userForm').on('submit', function() {
    // 通过序列化表单值创建 URL 编码文本字符串
    //  var form = $('#userForm').serialize();
    //  $(this).serialize();
    var formData = $(this).serialize();
    // 创建(添加)用户
    $.ajax({
            type: 'post',
            url: '/users',
            data: formData,
            success: function() {
                //   刷新页面
                location.reload()
                console.log(formData);
            },
            error: function() {
                alert('添加用户失败');
            }
        })
        //  阻止表单的默认行为
    return false;
});

//当用户选择文件的时候
// $(selector).on(event,childSelector,data,function)
$('#modifyBox').on('change', '#avatar', function() {
    // 用户选择到的文件
    var file = this.files[0];
    //  console.log(file);

    var formData = new FormData();

    formData.append('avatar', file);
    $.ajax({
        type: 'post',
        url: '/upload',
        data: formData,
        //   告诉ajax不要解析请求数据
        processData: false,
        // 告诉ajax不要设置参数请求类型
        contentType: false,
        success: function(response) {
            // console.log(response);
            $('#preview').attr('src', response[0].avatar);
            $('#hiddenAvatar').val(response[0].avatar)
        },
        error: function() {}
    })
});

// 向服务器端发送请求索要用户列表数据
$.ajax({
        type: 'get',
        url: '/users',
        success: function(response) {
            // console.log(response);
            // 使用模板引擎将用户信息和模板字符串进行拼接
            var html = template('userTpl', {
                    data: response
                })
                // console.log(html);
                // 将拼接好的字符串显示在页面中
            $('#userBox').html(html);
        }
    })
    // 1. 通过事件委托的形式为编辑按钮点击添加事件
    // 2. 在事件处理函数中获取到当前点击用户的id值
    // 3. 根据用户id获取用户的详细信息，
    // 并且通过模板引擎将用户的详细信息渲染到左侧的表单中
    // 4. 为修改按钮添加点击事件，
    // 在事件处理函数中获取到用户在表单中输入的内容，
    // 调用修改用户信息接口实现用户信息修改功能。
$('#userBox').on('click', '.edit', function() {
    // 获取被点击用户的id
    var id = $(this).attr('data-id');
    // 根据id获取用户的详细信息
    $.ajax({
        type: 'get',
        url: '/users/' + id,
        success: function(response) {
            // console.log(response);
            var html = template('modifyTpl', response)
                // console.log(html);
            $('#modifyBox').html(html)
        }
    })

});

// 为修改表单添加表单提交事件
$('#modifyBox').on('submit', '#modifyForm', function() {
    var formData = $(this).serialize();
    // console.log(formData);
    var id = $(this).attr('data-id');
    $.ajax({
            type: 'put',
            url: '/users/' + id,
            data: formData,
            success: function(response) {
                // console.log(response);
                // 刷新页面
                location.reload();
            }
        })
        // 阻止表单提交的默认行为
    return false;
})

//删除用户
$('#userBox').on('click', '.delete', function() {
        if (confirm('你确定要删除用户吗？'))
            var id = $(this).attr('data-id');
        $.ajax({
            type: 'delete',
            url: '/users/' + id,
            success: function() {
                location.reload();
            }

        })
    })
    // 获取全选按钮
var selectAll = $('#selectAll');
// 获取批量删除按钮
var deleteMany = $('#deleteMany');
// 当全选按钮的状态发生改变时
selectAll.on('change', function() {
    // 获取到全选按钮的当前的状态
    var status = $(this).prop('checked');
    if (status) {
        // 批量删除按钮显示
        deleteMany.show();
    } else {
        // 批量删除按钮隐藏
        deleteMany.hide();
    }
    // 获取到所有的用户并将用户状态和全选按钮保持一致
    $('#userBox').find('input').prop('checked', status);
});
// 当用户前面的复选框状态发生改变时
$('#userBox').on('change', '.userStatus', function() {
    // 获取到所有用户 在所有用户中过滤出选中的用户
    // 判断选中用户的数量和所有用户的数量是否一致
    // 如果一致 就说明所有的用户都是选中的
    // 否则就是用户没有选中
    var inputs = $('#userBox').find('input');
    if (inputs.length == inputs.filter(':checked').length) {
        // alert('所有用户都是选中的');
        selectAll.prop('checked', true);
    } else {
        // alert('不是所有用户都是选中的');
        selectAll.prop('checked', false);
    }
    // 如果选中的复选框数量大于0就说明有复选框选中
    if (inputs.filter(':checked').length) {
        // 批量按钮显示
        deleteMany.show();
    } else {
        // 批量按钮隐藏
        deleteMany.hide();
    }
});
//为批量删除按钮添加点击事件
deleteMany.on('click', function() {
    var ids = [];
    // 获取选中的用户
    var checkedUser = $('#userBox').find('input').filter(':checked');
    checkedUser.each(function(index, element) {
        ids.push($(element).attr('data-id'));
    });
    if (confirm('您真的确认需要批量删除吗')) {
        $.ajax({
            type: 'delete',
            url: '/users/' + ids.join('-'),
            success: function() {
                location.reload();
            }
        })
    }
});